var app = {
    area1: 0,
    area2: 0,
    area3: 0,
    zindex: 0,
    offsetT: 0,
    offsetL: 0,
    init: function () {
        $("#add").click(app.add);
        $("#del").click(app.del);
        $("#save").click(app.save);
        app.selectable($("nav"), false);
        app.enableDrag();
        app.drawLines();
    },
    // the save function.  Do we want to save to a db or local html5 storage?
    save: function () {
    },
    // removes all scrum notes
    del: function () {
        if (confirm("Are you sure you want to delete all the scrum notes?")) {
            $("#content").empty();
            app.zindex = 0
        }
    },

    // adds a new scrum note
    add: function () {
        var note = $('<article class="yellow"><header><div class=tfsText></div><ul class=tools><li><a href=# class=tfsNumber title="TFS number"><span>edit TFS</span></a></li><li><a href=#data class=editItem title="edit TFS Item"><span>edit TFS Item</span></a></li><li><a href=# class=close title="close note"><span>close</span></a></li></ul></header><textarea maxlength=160>notes</textarea></article>');

        // apply click events to the elements in the scrum note
        note.find("li:nth-child(1)").children("a").click(app.associateTFS);
        note.find("li:nth-child(2)").children("a").click(app.editItem);
        note.find("li:nth-child(3)").children("a").click(app.close);
        $("#content").prepend(note);
        $(".editItem").fancybox({
            'width': "600px"
        });
    },
    addWithData: function (tfsNumber, tfsDescription, section) {
        canvas = document.getElementById("myCanvas");
        context = canvas.getContext("2d");

        context.canvas.width = window.innerWidth;
        context.canvas.height = window.innerHeight;
        //var line1 = canvas.width * (1/3) - (canvas.width * (1/3)/2);
        //var line2 = canvas.width * (2 / 3) - (canvas.width * (1 / 3) / 2);
        //var line3 = canvas.width * (3 / 3) - (canvas.width * (1 / 3) / 2);

        var size = canvas.width / 3;
        var subSize = (size / 2) + 100;

        var moveDown = 200;

        var left = 0;

        if (section === "Proposed") {
            //left = 150;
            left = size - subSize;

            moveDown = (moveDown * app.area1) + 86;
            app.area1++;
        }
        if (section === "Active") {
            //left = 600;
            left = (size * 2) - subSize;
            moveDown = (moveDown * app.area2) + 86;
            app.area2++;
        }
        if (section === "Fixed") {
            //left = 1150;
            left = (size * 3) - subSize;
            moveDown = (moveDown * app.area3) + 86;
            app.area3++;
        }


        var note = $('<article class="yellow" style="z-index: 5; left: ' + left + 'px; top: ' + moveDown + 'px; position: absolute;"><header><div class=tfsText>' + tfsNumber + '</div><ul class=tools><li><a href=# class=tfsNumber title="TFS number"><span>edit TFS</span></a></li><li><a href=# class=editItem title="edit TFS Item"><span>edit TFS Item</span></a></li><li><a href=# class=close title="close note"><span>close</span></a></li></ul></header><textarea maxlength=160>' + tfsDescription + '</textarea></article>');

        // apply click events to the elements in the scrum note
        note.find("li:nth-child(1)").children("a").click(app.associateTFS);
        note.find("li:nth-child(2)").children("a").click(app.editItem);
        note.find("li:nth-child(3)").children("a").click(app.close);
        $("#content").prepend(note);
    },

    // Add's the TFS number to the top of the scrum note
    associateTFS: function () {
        var tfsNum = prompt("Enter in a TFS number", null);
        $(this).parent().parent().parent().find('div.tfsText').html(tfsNum);

    },
    // removes the scrum note
    close: function () {
        $(this).parent().parent().parent().parent().remove();
        return false
    },
    drawLines: function () {
        canvas = document.getElementById("myCanvas");
        context = canvas.getContext("2d");

        context.canvas.width = window.innerWidth;
        context.canvas.height = window.innerHeight;


        context.beginPath();

        rectX = canvas.width / 2 - 50;
        rectY = canvas.height / 2 - 25;

        var line1 = canvas.width * (1 / 3);
        var line2 = canvas.width * (2 / 3);
        var line3 = canvas.width * (3 / 3);

        context.font = "18pt Calibri";
        context.fillStyle = "black";


        // draw the colummns					
        context.moveTo(0, 35);
        context.lineTo(canvas.width, 35);
        context.fillText("Proposed", 0 + 10, 60);

        context.moveTo(line1, 35);
        context.lineTo(line1, canvas.height);
        context.fillText("Active", line1 + 10, 60);

        context.moveTo(line2, 35);
        context.lineTo(line2, canvas.height);
        context.fillText("Fixed", line2 + 10, 60);

        context.stroke();

    },
    editItem: function () {
        $.fancybox(
		'<div id="data">		<table border=0 cellpadding=0 cellspacing=10> 					<colgroup> 						<col width="150px"> 						<col> 					</colgroup> 						<tbody> 							<tr valign="top"> 								<td align="right"> <label for="tfstitle"> Title:</label> </td> <td> <input type="text" id="tfstitle" /> </td> 							</tr> 							 							<tr valign="top"> 								<td align="right"> <label for="tfsHoursWorked"> Hours Worked:</label> </td> <td> <input type="text" id="tfsHoursWorked" /> </td> 							</tr> 							 							<tr valign="top"> 								<td align="right"> <label for="tfsDescription"> Description:</label> </td> <td> <input type="text" id="tfsDescription" /> </td> 							</tr> 						</tbody> 					</table> 					<input type="button" value="Save" onclick="javascript:$.fancybox.close()" /> 						 			</div>',
		{
		    'autoDimensions': false,
		    'width': 350,
		    'height': '650px',
		    'transitionIn': 'none',
		    'transitionOut': 'none'
		}
	);
    },
    enableDrag: function () {
        var b = $(document),
            a = function (d) {
                if (b.data("mouseMove")) {
                    var c = b.data("target");
                    c.css("left", parseInt(c.css("left"), 10) + d.pageX - b.data("x")).css("top", parseInt(c.css("top"), 10) + d.pageY - b.data("y"));
                    b.data("x", d.pageX).data("y", d.pageY)
                }
            };
        b.mousedown(function (f) {
            var d = f.target.tagName.toLowerCase(),
                c = $(f.target).parent();
            if (d == "textarea") {
                $(f.target).parent().css("z-index", ++app.zindex)
            } else {
                if (d == "header") {
                    c.addClass("drag");
                    c.css("z-index", ++app.zindex);
                    if (c.css("position") != "absolute") {
                        c.css("left", c.offset().left).css("top", c.offset().top).css("position", "absolute")
                    }
                    b.data("mouseMove", true).data("x", f.pageX).data("y", f.pageY).data("target", c);
                    app.selectable($("article"), false)
                    f.offsetL = c.offset().left;
                    $(this).offsetL = c.offset().left;
                }
            }
        });
        b.mouseup(function (f) {
            if (b.data("mouseMove")) {
                b.data("target").removeClass("drag");
                b.data("mouseMove", false).data("target", null);
                app.selectable($("article"), true)
                app.getSection(f);
            }
        });
        b.mousemove(a)
    },
    getSection: function (f) {

        var lvalue = $(f.target).offset().left;


        var line1 = canvas.width * (1 / 4);
        var line2 = canvas.width * (2 / 4);
        var line3 = canvas.width * (3 / 4);


        if (lvalue < line1)
            return (1);
        else if (lvalue < line2)
            return (2);
        else if (lvalue < line3)
            return (3);
        else if (lvalue > line3)
            return (4);


    },
    selectable: function (a, b) {
        if (!a) {
            return
        }
        a.unselectable = b ? "off" : "on";
        a.onselectstart = function () {
            return b
        };
        a.css("-webkit-user-select", b ? "" : "none");
        a.css("-moz-user-select", b ? "" : "none")
    }
};
$(document).ready(function () {
    app.init();
});